$height: 22px;

.tags {
    display: flex;
    flex: 1;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
    box-sizing: content-box;

    li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid $color-primary-dark;
        color: $color-primary-darken;
        height: $height;
        border-radius: math.div($height, 2);
        padding: 0 6px;
        margin: 3px 4px;
        font-size: 10px;
    }

    li.error {
        color: #fff;
        background-color: $color-red;
        border-color: $color-red;
    }

    li.tags-selected.error {
        background: linear-gradient(135deg, $color-primary-dark, $color-red);
        border: none;
        height: $height + 2px;
        padding: 0 7px;
    }

    .tags-selected {
        background-color: $color-primary-dark;
        color: #fff;
    }
}
